<template>
  <div>
    <el-container>
      <el-aside :style="{ width: isCollapse ? 'auto' : '200px' }">
        <navbar :menus="menus" :collapse="isCollapse"></navbar>
      </el-aside>

      <el-container>
        <el-header>
          <i
            class="el-icon-caret-bottom"
            :class="isCollapse ? 'collapseTransform' : ''"
            @click="handleCollapse"
          ></i>
          <h1>CMS后台界面</h1>
          <el-dropdown trigger="click">
            <span class="el-dropdown-link"
              ><b>{{RealName}}</b>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-plus" @click.native="drawers">用户信息</el-dropdown-item>
              <el-dropdown-item
                icon="el-icon-circle-plus-outline"
                @click.native="updatepass"
                >修改密码</el-dropdown-item
              >
              <!-- vue @click.native 原生点击事件：给vue组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用 .native 修饰符） -->
              <el-dropdown-item icon="el-icon-circle-check" @click.native="open"
                >注销</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>

        <el-main>
          <BareadCrumbs></BareadCrumbs>
          <br>
            <router-view></router-view>
        </el-main>
        <!-- <el-footer></el-footer> -->
      </el-container>
    </el-container>

     <el-drawer title="个人名片" :visible.sync="drawer" :direction="direction">
        <div class="sub-title"></div>
        <el-form ref="form1" :model="form1" label-width="80px">
          <el-form-item label="姓名">
            <el-input
              id="inputDeep"
              v-model="form1.realName"
              type="text"
              placeholder="姓名"
              style="width: 150px"
              maxlength="10"
              show-word-limit
              v-if="seen"
            ></el-input>
            <span v-else>{{ form1.realName }}</span>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="form1.sex" v-if="seen">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
            <span v-else>{{ form1.sex }}</span>
          </el-form-item>
          <el-form-item label="出生日期">
            <el-col :span="11" v-if="seen">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form1.birthday"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
            <span v-else>{{ getDate(form1.birthday) }}</span>
          </el-form-item>

          <el-form-item label="家庭住址">
            <el-input
              type="textarea"
              v-model="form1.address"
              v-if="seen"
            ></el-input>
            <span v-else>{{ form1.address }}</span>
          </el-form-item>

          <el-form-item label="自我介绍">
            <el-input
              type="textarea"
              v-model="form1.selfIntroduction"
              v-if="seen"
            ></el-input>
            <span v-else>{{ form1.selfIntroduction }}</span>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="edit" v-if="!this.seen">
              编辑</el-button
            >
            <el-button type="primary" @click="save" v-else>保存</el-button>
          </el-form-item>
        </el-form>
      </el-drawer>


    <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="500px">
      <el-form :model="form">
        <el-form-item label="请输入原密码" :label-width="formLabelWidth">
          <el-input
            v-model="form.beforeusername"
            autocomplete="off"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="请输入密码" :label-width="formLabelWidth">
          <el-input
            v-model="form.password"
            autocomplete="off"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="请再次输入密码" :label-width="formLabelWidth">
          <el-input
            v-model="form.checkPass"
            autocomplete="off"
            type="password"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style>
.el-header {
  background-color: #a2a9af;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-icon-caret-bottom {
  display: flex;
  align-items: center;
}

.el-aside {
  color: #333;
  background-color: #4c5870;
  height: 100vh;
}
/* .el-footer {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
} */
.el-main {
  /* min-height: calc(100vh - 120px); */
  height: calc(100vh - 60px);
  padding: 15px !important;
  /* background: rgb(240, 238, 238); */
}
.collapseTransform {
  transform: rotate(90deg);
}
</style>

<script>
import BareadCrumbs from "../components/BreadCrumb.vue"
import Navbar from "../components/Navbar";
import routes from "../router/routes";
import common from "../utils/common";
import { modAdminPass,getAdminInformation,upAdmin} from "../api/users";
export default {
  data() {
    return {
      getDate:common.getDate,
        drawer: false,
      innerDrawer: false,
      direction: "rtl",
      circleUrl: "",
       seen: false,
      form1: {
        realName: "",
        sex:"",
        birthday: "",
        address: "",
        selfIntroduction: "",
      },
      isCollapse: false,
      dialogFormVisible: false,
      formLabelWidth: "120px",
      form: {
        beforeusername: "",
        password: "",
        checkPass: "",
      },
    };
  },
  components: {
    BareadCrumbs,
    Navbar,
  },

  // 计算属性
  computed: {
    menus() {
      let arr = this.resolve(routes);
      return arr;
    },
    RealName() {
      var name = localStorage.getItem("realname");
      return name;
    },
  },

  methods: {
     edit() {
      console.log(this.form1);
      this.seen = !this.seen;
      if (this.seen) {
        this.seen = true;
      } else {
        this.seen = false;
      }
    },
    save() {
      console.log(this.form1);
      this.form1.birthday = common.getDate(this.form1.birthday);
      console.log(this.form1.birthday);
       var id = localStorage.getItem("id");
      upAdmin(id,this.form1).then(({ data }) => {
        console.log(data);
      })

       this.seen = false;
    },
  
    //提交新密码确认按钮事件
    confirm() {
      this.dialogFormVisible = false;
      var id = localStorage.getItem("id");
      if (
        this.form.password === this.form.checkPass &&
        this.form.password.length > 0 &&
        this.form.checkPass.length > 0
      ) {
        modAdminPass(id, this.form)
          .then(({ data }) => {
            if (data.code === 200) {
              console.log(data);
              this.$message({ type: "success", message: data.msg });
             localStorage.clear();
          this.$router.push("/login");
            } else {
              this.$message({ type: "error", message: data.msg });
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$message({
          type: "error",
          message: "请验证二次输入的密码是否一致,且不能为空",
        });
      }
    },
    //修改密码框
    updatepass() {
      this.dialogFormVisible = true;
    },
    //个人简介
drawers(){
  this.drawer=true;
 var adminId = localStorage.getItem("id");
      console.log(adminId);
    getAdminInformation(adminId).then(({ data }) => {
        this.form1 = data.data[0];
   });
},
    //注销
    open() {
      this.$confirm("此操作将退出主页面, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          localStorage.clear();
          this.$router.push("/login");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消注销",
          });
        });
    },

    resolve(arr, parentPath = "") {
      let newArr = [];
      //遍历数组当中的每一个元素
      arr.forEach((route) => {
        let obj = Object.assign({}, route);
        // 当上级路径存在，并且最后一位不为/，则后面添加 /
        parentPath =
          parentPath && parentPath.lastIndexOf("/") !== parentPath.length - 1
            ? parentPath + "/"
            : parentPath;
        //加上父级路径
        obj.path = parentPath + obj.path;
        // 判断有没有children属性 如有，那么需要再处理，如果没有则直接push到一个新数组中
        if (obj.children && obj.children.length > 0) {
          obj.children = this.resolve(obj.children, obj.path);
        }
        //如果当前路由元信息有hidden信息，那么就将其子节点提升上来
        if (obj.meta && obj.meta.hidden) {
          if (obj.children && obj.children.length > 0) {
            obj.children.forEach((item) => {
              let tmp = Object.assign({}, item);
              newArr.push(tmp);
            });
          }
        } else {
          newArr.push(obj);
        }
      });
      return newArr;
    },
    handleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
  },
};
</script>